<template>
  <div class="app-container">
    <el-row>
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        label-width="68px"
      >
        <el-col>
          <el-form-item class="datetimerange">
            <el-button type="primary" size="small" @click="prev"
              >&lt;</el-button
            >
            <el-date-picker
              v-model="dateTimeValue"
              type="date"
              :clearable="false"
              placeholder="选择日期"
              @change="onChange"
            ></el-date-picker>
            <el-button type="primary" size="small" @click="next"
              >&gt;</el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <el-table
      v-loading="loading"
      border
      stripe
      :data="list"
      :height="clientHeight"
      :max-height="clientHeight"
    >
      <el-table-column
        fixed="left"
        width="70"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-radio v-model="radio" class="radio" :label="scope.$index"
            >&nbsp;</el-radio
          >
        </template>
      </el-table-column>
      <columns-filter-view label="患者姓名">
        <el-table-column
          label="患者姓名"
          align="center"
          prop="name"
          :min-width="'姓名'.length * 50"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.name }}</div>
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="手机号"
          align="center"
          :min-width="'手机号码'.length * 30"
        >
          <template slot-scope="scope">
            <hover-phone :items="scope.row" :type="queryParams.type" />
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="性别">
        <el-table-column
          label="性别"
          align="center"
          sortable
          column-key="sex"
          prop="sex"
          :formatter="(row) => formatterDict(row.sex, 'sexOptions')"
        />
      </columns-filter-view>
      <columns-filter-view label="年龄">
        <el-table-column label="年龄" align="center" prop="age">
          <template slot-scope="scope">
            <span>{{ scope.row.age == 0 ? '' : scope.row.age }}</span>
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="时间">
        <el-table-column
          label="时间"
          align="center"
          prop="datetime"
          width="180"
        />
      </columns-filter-view>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        :min-width="'是否开启'.length * 30"
      >
        <template slot-scope="scope">
          <el-button
            size="medium"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <template slot="empty">
        <empty></empty>
      </template>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :page-sizes="pageSizes"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { dailybrowser, delBrowser } from '@/api/erp/dailyBrowser'
import market from '@/mixins/market'
import { ColumnsFilterView } from '@/components/yiya/TableColumnsFilter'
import moment from 'moment'
import { encode } from '@/utils/utils'
import hoverPhone from '@/components/yiya/hoverPhone'
import Empty from '@/components/yiya/Empty'

export default {
  name: 'TodayBrowser',
  components: {
    ColumnsFilterView,
    hoverPhone,
    Empty,
  },
  mixins: [market],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 市场回访表格数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        type: 1,
        orderByColumn: 'date',
        isAsc: 'desc',
      },
      dateTimeValue: '',
    }
  },
  created() {
    if (this.$route.path == '/market/todayBrowser') {
      this.queryParams.type = 0
    } else {
      this.queryParams.type = 1
    }
  },
  methods: {
    doubleHandle(row) {
      this.goPath(row)
    },
    goPath(row) {
      if (this.$route.path == '/market/todayBrowser') {
        this.goUserMessage(row.userid)
      } else if (this.$route.path == '/shop/StoreTodayHandle') {
        this.$router.push(
          `/shop/details?id=${row.userid}&redirect=${encode({
            path: this.$route.path,
            query: this.queryParams,
          })}`
        )
      } else if (this.$route.path == '/tc/TcTodayHandle') {
        this.$router.replace(
          `/tc/details?id=${row.userid}&redirect=${encode({
            path: this.$route.path,
            query: this.queryParams,
          })}`
        )
      } else {
        this.$router.replace(
          `/doctor/details?id=${row.userid}&redirect=${encode({
            path: this.$route.path,
            query: this.queryParams,
          })}`
        )
      }
    },
    handleDetail(row, column, event) {
      if (event.target._prevClass == undefined) {
        this.goPath(row)
      }
      if (
        event.target._prevClass == 'el-radio__inner' ||
        event.target._prevClass == 'el-radio__label'
      ) {
        event.preventDefault()
        this.radio = this.list.indexOf(row)
        return
      }
    },
    goUserMessage(id) {
      this.$router.replace(
        `/userMessageHandle/userHandle?id=${id}&redirect=${encode({
          path: this.$route.path,
          query: this.queryParams,
        })}`
      )
    },
    onChange(value) {
      this.changeTimeDate(value)
    },
    async prev() {
      this.dateTimeValue = moment(this.dateTimeValue).subtract(1, 'days')
      await this.changeTimeDate(this.dateTimeValue._d)
    },
    async next() {
      this.dateTimeValue = moment(this.dateTimeValue).add(1, 'days')
      await this.changeTimeDate(this.dateTimeValue._d)
    },
    async changeTime(e) {
      this.dateTimeValue = this.parseTime(e[0].$d, '{y}-{m}-{d}')
      await this.changeTimeDate(e[0].$d)
    },
    async changeTimeDate(e) {
      this.queryParams.date = this.parseTime(e, '{y}-{m}-{d}')
      await this.getList(this.queryParams)
    },
    handleDelete(row) {
      const ids = row.key
      this.$confirm('是否确认删除"' + row.name + '"的记录项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return delBrowser(ids)
        })
        .then(() => {
          this.getList(this.queryParams)
          this.msgSuccess('删除成功')
        })
        .catch(function () {})
    },
    /** 查询市场回访列表 */
    async getList(queryParams) {
      this.loading = true
      await dailybrowser(queryParams).then((response) => {
        for (const item of response.rows) {
          item.datetime = moment(item.datetime).format('YYYY-MM-DD hh:mm:ss')
          item.phoneNumber = item.phone1
          item.phoneNumber2 = item.phone2
          item.phoneOwnership = item.ownership1
          item.phoneOwnership2 = item.ownership2
          item.id = item.userid
        }
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
  },
}
</script>

